

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>抽奖</title>
    <link rel="stylesheet" href="{{ URL::asset('/') }}mastedu/turntable-lottery/css/kinerlottery.css">
    <link rel="stylesheet" href="{{ URL::asset('/') }}mastedu/turntable-lottery/css/xiaoyi.css">
</head>
<body>

<!--头部-->
<header class="title-box">
    <img class="enroll-logo" style="padding-top:.15rem;margin-left:.15rem;" src="{{ URL::asset('/') }}mastedu/turntable-lottery/pic/logo.png" alt="">
    <img class="enroll-title" src="{{ URL::asset('/') }}mastedu/turntable-lottery/pic/enroll-title.png" alt="">
    <img class="book3-rtop" src="{{ URL::asset('/') }}mastedu/turntable-lottery/pic/book3-rtop.png" alt="">
    <img class="book4-tmiddle" src="{{ URL::asset('/') }}mastedu/turntable-lottery/pic/book4-tmiddle.png" alt="">
    <!--title-->
    <div class="success-subtitle">
        <img src="{{ URL::asset('/') }}mastedu/turntable-lottery/pic/draw-subtitle.png" alt="">
    </div>
</header>


<!--转盘-->
<div class="table-box">
    <div id="box" class="box">
        <div class="outer KinerLottery KinerLotteryContent">
            <img src="{{ URL::asset('/') }}mastedu/turntable-lottery/pic/draw.png">
        </div>
        <!-- 大专盘分为三种状态：活动未开始（no-start）、活动进行中(start)、活动结束(completed),可通过切换class进行切换状态，js会根据这3个class进行匹配状态 -->
        <a href="javascript:" class="inner KinerLotteryBtn start"></a>
    </div>
</div>

<div class="rule-box">
    <img class="rule-title" src="{{ URL::asset('/') }}mastedu/turntable-lottery/pic/rule-title.png" alt="">
    <ul class="draw-rule-box">
        <li>1、将此活动链接成功分享到朋友圈可获得一次抽奖机会，转发至微信群可额外获得一次抽奖机会（每人每天最多可获得3次抽奖机会）</li>
        <li>2、领取时间：2018年5月1日-5月31日，规定时间内未领取算自愿放弃</li>
        <li>3、代金券使用时间：代金券仅限报名秋季班时使用，金额不累计，以最高为准</li>
        <li>4、中奖奖品领取步骤：添加下方“<span>马思特小马哥</span>”微信——回复“<span>姓名+电话+抽中截图</span>”——等待小马哥后台数据核实</li>
        <li><img style="width:50%; margin-top:1.5rem;margin-bottom:.25rem;" src="{{ URL::asset('/') }}mastedu/index/pic/code-zixun.jpg" alt=""><p style="text-align:center;">长按二维码添加小马哥领取奖品</p ></li>
    </ul>
</div>

<script src="{{ URL::asset('/') }}mastedu/js/jquery-3.1.1.min.js"></script>
<script src="{{ URL::asset('/') }}mastedu/turntable-lottery/js/kinerlottery.js"></script>
<script src="{{ URL::asset('/') }}mastedu/turntable-lottery/js/layer.js"></script>
<script src="{{ URL::asset('/') }}mastedu/js/font.js"></script>
<script src="{{ URL::asset('/') }}mastedu/js/publib.js"></script>
<script src="{{ URL::asset('/') }}mastedu/js/jweixin-1.2.0.js"></script>

@include('mastedu.share')

<script>
    var ran = 0;
    var num = 0;
    var times = 0;
    /*
     * 根据转盘旋转角度判断获得什么奖品
     */
    var whichAward = function (deg) {
        $("#d_zj").show();
        if ((deg > 0 && deg <= 36)) {
            $("#zj_img").attr("src", "{{ URL::asset('/') }}mastedu/turntable-lottery/images/shouhuan.png");
            $("#zj_txt").html("小米手环");
            return;
        } else if ((deg > 36 && deg <= 72)) {
            $("#zj_img").attr("src", "{{ URL::asset('/') }}mastedu/turntable-lottery/images/quan100.png?spm=1");
            $("#zj_txt").html("100元代金券");
            return;
        } else if (deg > 72 && deg <= 108) {
            $("#zj_img").attr("src", "{{ URL::asset('/') }}mastedu/turntable-lottery/images/ipad.png");
            $("#zj_txt").html("iPad");
            return;
        } else if (deg > 108 && deg <= 144) {
            $("#zj_img").attr("src", "{{ URL::asset('/') }}mastedu/turntable-lottery/images/wenju.png");
            $("#zj_txt").html("文具套装");
            return;

        } else if (deg > 144 && deg <= 180) {
            $("#zj_img").attr("src", "{{ URL::asset('/') }}mastedu/turntable-lottery/images/quan50.png?spm=1");
            $("#zj_txt").html("50元代金券");
            return;
        } else if (deg > 180 && deg <= 216) {
            $("#zj_img").attr("src", "{{ URL::asset('/') }}mastedu/turntable-lottery/pic/jiayou.png");
            $("#zj_txt").html("");
            $("#d_zj").hide();
            return;

        } else if (deg > 216 && deg <= 252) {
            $("#zj_img").attr("src", "{{ URL::asset('/') }}mastedu/turntable-lottery/images/kindle.png");
            $("#zj_txt").html("阅读器");
            return;
        } else if (deg > 252 && deg <= 288) {
            $("#zj_img").attr("src", "{{ URL::asset('/') }}mastedu/turntable-lottery/images/quan20.png?spm=1");
            $("#zj_txt").html("20元代金券");
            return;
        } else if (deg > 288 && deg <= 324) {
            $("#zj_img").attr("src", "{{ URL::asset('/') }}mastedu/turntable-lottery/images/shubao.png");
            $("#zj_txt").html("定制书包");
            return;
        } else if (deg > 324 && deg < 360) {
            $("#zj_img").attr("src", "{{ URL::asset('/') }}mastedu/turntable-lottery/images/lele.png");
            $("#zj_txt").html("精美玩具");
            return;
        } else {
            if(times > 0) {
                $("#zj_img").attr("src", "{{ URL::asset('/') }}mastedu/turntable-lottery/images/nop-2.png");
                $("#zj_txt").html("再接再厉");
            }else{
                $("#zj_img").attr("src", "{{ URL::asset('/') }}mastedu/turntable-lottery/images/nop-3.png");
                $("#zj_txt").html("请明天再来参加");
            }
            $("#d_zj").hide();
            return;
        }

    };


    //获取第一次抽奖的随机数
    $.ajax({
        url:'/mastedu/lottery',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        type:'post',
        data: {
            cseed: Math.random(),
            appid : "{{ $appid }}",
            token : "{{ $token }}"
        },
        dataType : 'json',
        success : function (ajaxobj) {
            if (ajaxobj.error === undefined) {
                num = ajaxobj.lottery;
                times = ajaxobj.times;
                ran = parseFloat(ajaxobj.lottery / 10 + 0.05);//中奖的编号
                click = false;
            } else {
                ran = 0;
            }
        }
    });

    var KinerLottery = new KinerLottery({
        rotateNum: 8, //转盘转动圈数
        body: "#box", //大转盘整体的选择符或zepto对象
        direction: 1, //0为顺时针转动,1为逆时针转动
        disabledHandler: function (key) {
            switch (key) {
                case "noStart":
                    alert("活动尚未开始");
                    break;
                case "completed":
                    alert("活动已结束");
                    break;
            }
        }, //禁止抽奖时回调
        clickCallback: function () {
            var __this = this;
            if(num > 10){
                if(times > 0) {
                    $("#zj_img").attr("src", "{{ URL::asset('/') }}mastedu/turntable-lottery/images/nop-1.png");
                    $("#zj_txt").html("再接再厉");
                }else{
                    $("#zj_img").attr("src", "{{ URL::asset('/') }}mastedu/turntable-lottery/images/nop-3.png");
                    $("#zj_txt").html("请明天再来参加");
                }
                layer.open({
                    type: 1,
                    shade: [0.7, 'rgb(0, 0, 0)'],
                    area: ['90%', "70%"],
                    offset: ['12%'],
                    scrollbar: false,
                    shadeClose: true,
                    resize: true,
                    title: false, //不显示标题
                    closeBtn: 0,
                    content: $("#gx-box"),   //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                    success: function (layero, index) {
                        $(".btn-close").on("click", function () {
                            layer.closeAll();
                        })
                    }
                });
            }else {
                $.ajax({
                    url: '/mastedu/lottery/result?appid={{$appid}}&token={{$token}}',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    type: 'post',
                    data: {
                        num: num,
                        appid: "{{ $appid }}",
                        token: "{{ $token }}"
                    },
                    dataType: 'json',
                    success: function (ajaxobj) {
                        if (ajaxobj.error === undefined) {
                            //此处访问接口获取奖品
                            function random() {
                                return Math.floor(ran * 360);
                            }

                            __this.goKinerLottery(random());
                        }
                    }
                });
            }

        }, //点击抽奖按钮,再次回调中实现访问后台获取抽奖结果,拿到抽奖结果后显示抽奖画面
        KinerLotteryHandler: function (deg) {

            var click = false;
            if (!click) {
                $.ajax({
                    url:'/mastedu/lottery?appid={{$appid}}&token={{$token}}',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    type:'post',
                    data: {
                        cseed: Math.random(),
                        appid : "{{ $appid }}",
                        token : "{{ $token }}"
                    },
                    dataType : 'json',
                    success : function (ajaxobj) {
                        if (ajaxobj.error === undefined) {
                            num = ajaxobj.lottery;
                            times = ajaxobj.times;
                            ran = parseFloat(ajaxobj.lottery / 10 + 0.05);//中奖的编号
                            click = false;
                        } else {
                            ran = 0;
                        }
                    }
                });
            }

            whichAward(deg);
            // //捕获页
            layer.open({
                type: 1,
                shade: [0.7, 'rgb(0, 0, 0)'],
                area: ['90%', "70%"],
                offset: ['12%'],
                scrollbar: false,
                shadeClose: true,
                resize: true,
                title: false, //不显示标题
                closeBtn: 0,
                content: $("#gx-box"),   //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                success: function (layero, index) {
                    $(".btn-close").on("click", function () {
                        layer.closeAll();
                    })
                }
            });

        } //抽奖结束回调
    });
</script>
</body>
</html>

<div id="gx-box" class="gx-box">
    <img class="img-gift" id="zj_img" src="" alt="">
    <div class="gift-box">
        <div id="d_zj"></div>
        <div class="gift-name" id="zj_txt"></div>
    </div>
    <a href="javascript:" class="btn-close"></a>
</div>

